<script lang="ts">
	import { createMessage } from '$components/basic/message';
	export let position: 'center' | 'end' | 'start' = 'center';
	import Select, { Option } from '@smui/select';
	import { createEventDispatcher, onMount } from 'svelte';

	export let pageSize: number = 20;
	export let currentPage: number = 1;
	export let total: number = 1;
	export let variableSize: boolean = false;
	export let style: string = '';

	let pageSizeText = '20 per page';
	const pageSizeOptions = [10, 20, 50, 100].map((i) => i + ' per page');
	onMount(() => {
		const index = [10, 20, 50, 100].findIndex((i) => i === pageSize);
		pageSizeText = pageSizeOptions[index];
	});

	$: max = Math.ceil(total / pageSize);

	function isDisabled(index: number) {
		console.log(currentPage, max, index);

		return (currentPage === 1 && index < 2) || (currentPage === max && index > 1);
		// if (index < 2) {
		// 	return currentPage === 1;
		// }
		// return currentPage === max;
	}

	const disabledStyle = 'color: #9ca3af; cursor: not-allowed;';
	const dispatch = createEventDispatcher();
	const inRange = (v: number) => v >= 1 && v <= max;
	const handlePageSize = (v: number, sub?: number) => {
		let testValue = 0;
		if (sub) testValue = currentPage + sub;
		else testValue = Math.ceil(v);
		if (inRange(testValue)) {
			currentPage = testValue;
			dispatchChange();
		} else {
			createMessage({ type: 'warning', message: 'Out of range' });
		}
	};
	function dispatchChange() {
		dispatch('pageNavigationChange', { page: currentPage, size: pageSize });
	}
	function changePageSize() {
		const index = pageSizeOptions.findIndex((i) => i === pageSizeText);
		pageSize = [10, 20, 50, 100][index];
		dispatchChange();
	}

	const list = [
		{ icon: 'keyboard_double_arrow_left', onClick: () => handlePageSize(1) },
		{ icon: 'chevron_left', onClick: () => handlePageSize(currentPage, -1) },
		{ icon: '', onClick: () => {} },
		{ icon: 'chevron_right', onClick: () => handlePageSize(currentPage, 1) },
		{ icon: 'double_arrow', onClick: () => handlePageSize(max) }
	];
</script>

<div
	class="h-76px w-full flex flex-row items-center gap-5px"
	style={`justify-content: ${position};`.concat(style)}
>
	{#each list as item, index}
		{#if item.icon}
			<button
				class="outline-none! border-none! w-56px h-56px bg-gray-1 flex-cc color-gray-7 hover:bg-blue-1 hover:color-blue-7 cursor-pointer"
				on:click={item.onClick}
				style={(currentPage === 1 && index < 2) || (currentPage === max && index > 1)
					? disabledStyle
					: ''}
			>
				<div class="material-symbols-outlined">{item.icon}</div>
			</button>
		{:else}
			<div class="h-56px w-56px flex-cc border border-gray-1 border-solid">Page</div>
			<input
				type="text"
				bind:value={currentPage}
				on:blur={() => handlePageSize(currentPage)}
				class="min-w-56px w-fit max-w-2em h-56px bg-gray-1 flex-cc color-gray-7 border-none outline-none! text-center"
			/>
			<div class="h-56px w-56px flex-cc border border-gray-1 border-solid">
				/{max}
			</div>
		{/if}
	{/each}
	<!-- <Autocomplete options={pageSizeOptions} bind:value={pageSizeText} textfield$variant="outlined" /> -->
	{#if variableSize}
		<Select
			class="clear-select-underline"
			variant="filled"
			bind:value={pageSizeText}
			on:SMUISelect:change={changePageSize}
		>
			{#each pageSizeOptions as pso}
				<Option value={pso}>{pso}</Option>
			{/each}
		</Select>
	{/if}
	<slot />
</div>
